<script setup>
import { computed } from 'vue';
import { DeleteOutlined } from '@ant-design/icons-vue';
import { classes, editingLabelLayer, labelColorMap } from '../common.js';
import { UserOpGte } from '../op-perms.js';
import { delLayer, selectLayer } from '../api/use-layer-common.js';

const props = defineProps(['item']);

const filterOption = (input, opt) => opt.value.includes(input);
const options = computed(() => Array.from(classes.value, value => ({ value, label: value })));

const LabelPointerdown = (() => {
  let timestamp = Date.now();
  let target = null;
  return event => {
    const now = Date.now();
    now - timestamp <= 300 && target == event.target
    ? UserOpGte('标注') && (editingLabelLayer.value = props.item)
    : selectLayer('switch', props.item, event.ctrlKey);

    target = event.target;
    timestamp = now;
  };
})();
</script>

<template>
  <li class="label-layer">
    <template v-if="editingLabelLayer == props.item">
      <a-select
        v-model:value="props.item.label"
        placeholder="点击选择标签"
        show-search
        size="small"
        :options="options"
        :dropdown-match-select-width="false"
        :filter-option="filterOption"
        @change="() => props.item.color = labelColorMap[props.item.label]">
        <template #suffixIcon></template>
      </a-select>
    </template>
    <template v-else>
      <div
        class="label ellipsis"
        :class="{ empty: !props.item.label }"
        :title="props.item.label"
        @pointerdown="LabelPointerdown">
        {{ props.item.label || '双击编辑标签' }}
      </div>

      <div class="fn">
        <template v-if="UserOpGte('标注')">
          <a-popconfirm
            title="确定删除此数据？"
            placement="left"
            ok-text="确定"
            cancel-text="取消"
            @confirm="() => delLayer(props.item)"
          >
            <a-button>
              <template #icon><delete-outlined style="color: rgb(200,0,0);" /></template>
            </a-button>
          </a-popconfirm>
        </template>
      </div>
    </template>
  </li>
</template>

<style>
.label-layer {
  display: flex;
  gap: 1em;
  align-items: center;
  height: 40px;
  padding-left: 8px;
  padding-right: 12px;
  border-left: 4px solid;
  outline: 1px solid transparent;
  outline-offset: -1px;
  cursor: pointer;
}

.label-layer:hover,
.label-layer.selected { background-color: rgb(234,246,255); }

.label-layer.selected {
  color: rgb(54,156,255);
  /* outline-color: currentColor; */
}

.label-layer:not(:last-child) { margin-bottom: 6px; }

.label-layer > .fn {
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  gap: .5em;
}

.label-layer > .ant-btn {
  width: auto;
  height: auto;
  padding-left: 4px;
  padding-right: 4px;
  border: 0;
  background: transparent;
}
.label-layer > .ant-btn:focus { color: unset; }

.label-layer > :first-child { flex: 1; }
.label-layer > .label {
  outline: 1px dashed transparent;
  cursor: cell;
  user-select: none;
}

.label-layer > .label.empty {
  text-decoration: underline dotted;
  color: rgba(0,0,0,.5);
}

.label-layer > .label:hover { outline-color: currentColor; }
</style>
